<template>
	<view class="bgIndex ">
		<view class="search-content">


			<image class="search-img" :src="search" mode=""></image>
			<input placeholder="请搜索推广员名称" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
				style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />

		</view>

		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<view v-for="(item,index) in list" :key="index">
				<view style="padding: 20rpx;" class=" flex-between padding_20rpx_0 background-color_FFFFFF">
					<view class="flex-start-center">
						<view class="orderLocation">
							<image class="avatar" :src="item.avatar" mode=""></image>

							</image>

						</view>
						<view class="margin-left_16rpx flex-columns" style="height: 100rpx;">
							<view class="flex-start-center">
								<view class="font-overflow font-weight " style="color: #333333;max-width: 250rpx;">
									{{item.nickname}}


								</view>
								<view class="">
									<view v-if="item.level_id==1" class="">
										<image class="noVip" src="https://z4a.net/images/2024/07/17/-1617.png"
											mode="widthFix">
										</image>
									</view>
									<view class="" v-else>
										<image class="Vip" src="https://z4a.net/images/2024/07/17/-1134.png"
											mode="widthFix">
										</image>
									</view>
								</view> 

							</view>




							<view class="">
								<text style="color:#999999">创建时间：{{item.create_time}}</text>
							</view>


						</view>
					</view>
					<view class="flex-column">
						<view class="font-weight_bold" style="color: #4183FF;">
								{{item.consumers}} {{'('+currency_name+')'}}
						</view>
						<view class="" style="color: #757575;">
							<text>已消费</text>
						</view>
					</view>
				</view>

			</view>
		</mescroll-body>


	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
					currency_name: uni.getStorageSync("system").currency_name,
				downOption: {
					auto: false
				},
				search: this.$img.search,
				searchVal: '',
				// 上拉配置项
				upOption: {
					auto: true
				},
				userInfo: uni.getStorageSync("userInfo"),
				currentIndex: 0,
				tabList: [{
					name: '谁看过我',
					id: '' //null
				}, {
					name: '我看过谁',
					id: '1' //null
				}, ],
				windowHeight: null,
				list: [],
				listPoster: [],
				autoplay: true,

				interval: 3000,
				listPoster: [],
				userInfoObject: null,
				associateGetInfo: uni.getStorageSync("associateGetInfo"),
				promoterGetInfo:null

			}
		},
		onLoad() {



			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
			this.userInformation()
		
		},
		onShow() {
			this.$nextTick(() => {
				this.mescroll?.resetUpScroll();
			})
		},
		methods: {
			async userInformation() {
				const result = await this.$http.post({
					url: this.$api.promoterGetInfo,
					data: {
			
			         	id: uni.getStorageSync("loginInfo").id
			
			
					},
					headers: {
						'Authorization': this.userInfo.token
					}
			
				})
			
				if (result.code == 0) {
					console.log('data', result.data);
					this.promoterGetInfo = result.data
			         wx.setStorageSync('promoterGetInfo', this.promoterGetInfo);
			         this.$nextTick(() => {
			         	this.mescroll?.resetUpScroll();
			         })
				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			
			changeInput(e) {

				this.searchVal = e.detail.value
				this.mescroll?.resetUpScroll();
			},

			async posterFn() {
				const resPoster = await this.$http.post({
					url: this.$api.poster,
					data: {

						type: 8

					},
					headers: {

					}

				})

				if (resPoster.code == 0) {




					// 	// 展示区域  1 首页 2 商城 3 套餐卡市场 这里还需要区分

					this.listPoster = resPoster.data.filter(item => item.type == 8);
					console.log(this.listPoster)




				} else {

					this.$sun.toast(resPoster.message, 'none')
				}



			},
			getChange(index) {
				console.log(index)

				this.currentIndex = index

				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})


			},
			async upCallback(scroll) {
				const log = this.$api.getPromoterUserList
				const result = await this.$http.post({
					url: log,
					data: {
						page: scroll.num,
						limit: 10,
						id: this.promoterGetInfo.id,
						name:this.searchVal

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})


				if (result.code == 0) {

					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];

					this.list = this.list.concat(result.data.list);

					console.log('this.list', this.list, this.list.length);
				} else {
					this.$sun.toast(result.message, 'none')
				}


			},
			ViewHomepageFn(uid) {
				this.$sun.navGo('/pagesB/index/socialDetails', {
					uid: uid
				})

			}

		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #fff;
	}

	.bgIndex {

		.search-content {

			// justify-content: center;
			margin-top: 60rpx;
			display: flex;
			align-items: center;
			padding: 20rpx;
			margin-bottom: 30rpx;
			height: 76rpx;

			background: rgb(246, 248, 255);

			border-radius: 84rpx;


			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
				margin-left: 20rpx;
			}

			.address-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
				margin-left: 20rpx;
			}

			.icon_close {
				padding: 0rpx 15rpx;
				width: 36rpx;
				height: 36rpx;
				margin-right: 30rpx;
			}

		}

		.noVip {
			width: 136rpx;
			height: 40rpx;
			margin-left: 10rpx;
			margin-top: 7rpx;
		}

		.Vip {
			width: 136rpx;
			height: 40rpx;
			margin-left: 10rpx;
			margin-top: 7rpx;
		}



		.bg {

			height: 232rpx
		}

		.fans {
			margin-left: 10rpx;
			width: 110rpx;
			height: 36rpx;
			color: rgb(81, 169, 255);
			background: rgb(210, 242, 255);
		}

		.follow {
			margin-left: 10rpx;
			width: 68rpx;
			height: 36rpx;
			color: rgb(182, 32, 224);
			background: rgb(247, 219, 255);
		}

		.homepage {
			width: 144rpx;
			height: 64rpx;
			box-sizing: border-box;
			border: 2rpx solid rgb(120, 93, 246);
			border-radius: 76px;
			color: rgb(120, 93, 246);
			background: rgb(255, 255, 255);
		}

		.chat {
			width: 144rpx;
			height: 53rpx;
			box-sizing: border-box;
			border: 2rpx solid rgb(120, 93, 246);
			border-radius: 76px;
			color: rgb(120, 93, 246);
			background: rgb(255, 255, 255);
		}

		.orderLocation {
			position: relative;

			.avatar {
				width: 61px;
				height: 61px;
				border-radius: 50%;
			}

			.orderImg {
				width: 90px;
				height: 90px;
				border-radius: 20rpx;

			}

			.orderStatusImg {
				position: absolute;
				left: 0;
				top: 0;
				width: 106rpx;
				height: 48rpx;
				border-radius: 16rpx 0rpx 16rpx 0rpx;
				color: #fff;
				background: rgb(224, 32, 32);
				z-index: 999;
			}

			.orderStatusImged {
				position: absolute;
				left: 0;
				top: 0;
				width: 106rpx;
				height: 48rpx;
				border-radius: 16rpx 0rpx 16rpx 0rpx;
				color: #fff;
				border-radius: 16rpx 0rpx 16rpx 0rpx;

				background: rgb(0, 0, 0);
				z-index: 999;
			}
		}


	}
</style>